<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>手风琴效果</title>
<style>
li{list-style:none;}
img{width:300px;height:300px;}

ul {width:500px;height:300px;overflow:hidden;}
ul li{
	float:left;
	width:100px;
	heihgt:100%;
	box-shadow:0 0 5px rgba(0,0,0,0.5);
	-webkit-transition:width 1s ease-out;
	-moz-transition:width 1s ease-out;
	-ms-transition:width 1s ease-out;
	transition:width 1s ease-out;
}
ul:hover li:not(:hover){width:50px;}/*:not(selector) 选择器匹配非指定元素/选择器的每个元素。*/
ul li:hover{width:300px;}
/* 初始展开  */
.init li{width:50px;}
.init li:nth-child(3){width:300px;}
</style>

</head>
<body>
<ul>
    <li><a href="#"><img src="6.jpg" alt=""/></a></li>
    <li><a href="#"><img src="7.jpg" alt=""/></a></li>
    <li><a href="#"><img src="8.jpg" alt=""/></a></li>
    <li><a href="#"><img src="9.jpg" alt=""/></a></li>
    <li><a href="#"><img src="10.jpg" alt=""/></a></li>
</ul>
<ul class="init">
    <li><a href="#"><img src="6.jpg" alt=""/></a></li>
    <li><a href="#"><img src="7.jpg" alt=""/></a></li>
    <li><a href="#"><img src="8.jpg" alt=""/></a></li>
    <li><a href="#"><img src="9.jpg" alt=""/></a></li>
    <li><a href="#"><img src="10.jpg" alt=""/></a></li>
</ul>
</body>
</html>